<template>
  <div @dblclick="gobackVideoGridPages">
    <video id="videoPlayer" class="centeredVideo" controls autoplay>
    </video>
  </div>
</template>

<script>
import flvjs from "flv.js";
import {mapState, mapActions} from 'vuex'

export default {
  name: "flvjs", // 不能使用 video 命名
  props: {
    videoSrc: {
      type: String,
      default: "http://10.202.110.106:8090/live?app=live&stream=zhuhong_1"
    }
  },
  data() {
    return {
      flvPlayer: null
    };
  },
  computed: {
    ...mapState(['monitorData'])
  },
  mounted() {
    if (flvjs.isSupported()) {
      console.log("视频地址:", this.videoSrc);
      var videoElement = document.getElementById('videoPlayer');
      if (typeof this.flvPlayer !== "undefined") {
        if (this.flvPlayer !== null) {
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        }
      }
      this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasVideo: true,
          url: this.videoSrc
      });
      // console.log('开始加载视频', this.flvPlayer)
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load()
      // console.log('开始播放视频', this.flvPlayer)
      this.flvPlayer.play()
    }
  },
  destroyed() {
    console.log('销毁视频')
    this.flv_destroy()
  },
  methods: {
    ...mapActions([
      'closeDetailsLoadVideoGridPages',
      'getStationVideoStreamUrl',
      'updateStationVideoStreamState',
      'gobackVideoGridPages'
    ]),
    gobackVideoGridPages() {
      this.closeDetailsLoadVideoGridPages()
    },
    flv_load_mds(){
      console.log("视频地址:", this.videoSrc);
      var videoElement = document.getElementById('videoPlayer');
      if (typeof this.flvPlayer !== "undefined") {
        if (this.flvPlayer != null) {
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        }
      }
      this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasVideo: true,
          url: this.videoSrc
      });
      console.log('开始加载视频')
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      console.log('开始播放视频')
      this.flvPlayer.play();
    },
    flv_start() {
      console.log('开始播放视频')
      this.flvPlayer.play();
    },
    flv_pause() {
      console.log('暂停视频')
      this.flvPlayer.pause();
    },
    flv_destroy() {
      // console.log('销毁视频')
      if (this.flvPlayer != null) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
    show_flv_version() {
      console.log('flvjs的版本：', flvjs.version)
    },
    showLogging() {
      console.log('日志：')
      let flvStatus = flvjs.LoaderStatus
      let flvEvent = flvjs.Events
      let flvError = flvjs.ErrorDetails
      console.log(flvStatus, flvEvent, flvError)
    }
  }
};
</script>

<style>
.centeredVideo {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}
</style>
